<template>
	<view>
		<!--components/statusLayout/statusLayout.wxml -->
		<view id="root" class="status-layout-root" :style="rootStyle" :hidden="status=='CONTENT'">
			<view class="status-main" @tap="onClickListener">
				<image :class="status=='LOADING'?'status-image-anim':''"
					:style="'width:' + imgWidth + 'px; height:' + imgHeight + 'px;'" :src="statusImage"></image>
				<view>{{statusText}}</view>
			</view>
		</view>
		<view class="content" :hidden="status!='CONTENT'">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "status_layout",
		data() {
			return {
				statusText: '',
				statusImage: '',
				loadingAnimation: '',
				imgWidth: 100,
				imgHeight: 100,
				status:"LOADING",
			};
		},
		components: {},
		props: {
			rootStyle: {
				type: String,
				default: ''
			},
			// status: {
			// 	type: String,
			// 	default: 'CONTENT'
			// },
			emptyImage: {
				type: String,
				default: "/static/status/status_empty.png"
			},
			emptyText: {
				type: String,
				default: '什么都木有~~'
			},
			emptyImageWidth: {
				type: Number,
				default: 64
			},
			emptyImageHeight: {
				type: Number,
				default: 64
			},
			errorImage: {
				type: String,
				default: "/static/status/status_error.png"
			},
			errorText: {
				type: String,
				default: '操作失败, 请稍后重试!'
			},
			errorImageWidth: {
				type: Number,
				default: 64
			},
			errorImageHeight: {
				type: Number,
				default: 64
			},
			loadingText: {
				type: String,
				default: '加载中, 请稍后...'
			},
			loadingImage: {
				type: String,
				default: "/static/common/icon_loading.png"
			},
			loadingImageWidth: {
				type: Number,
				default: 40
			},
			loadingImageHeight: {
				type: Number,
				default: 40
			}
		},
		watch: {
			status: {
				handler: function(newVal, oldVal) {
					console.log(newVal);
					if (newVal == oldVal) return;
					this.setStatus(newVal);
				},
				immediate: true
			}
		},
		methods: {
			setStatus: function(status) {
				switch (status) {
					case 'LOADING':
						this.showLoading();
						break;

					case 'EMPTY':
						this.showEmpty();
						break;

					case 'ERROR':
						this.showError();
						break;

					case 'CONTENT':
						this.showContent();
						break;

					default:
						console.log("error: 未找到该status");
						break;
				}
			},
			showLoading: function() {
				this.status = "LOADING",
				this.statusText = this.loadingText,
				this.statusImage = this.loadingImage,
				this.imgWidth = this.loadingImageWidth,
				this.imgHeight = this.loadingImageHeight
			},
			showEmpty: function() {
				this.status = "EMPTY",
				this.statusText = this.emptyText,
				this.statusImage = this.emptyImage,
				this.imgWidth = this.emptyImageWidth,
				this.imgHeight = this.emptyImageHeight
			},
			showError: function() {
				this.status = "ERROR",
				this.statusText = this.errorText,
				this.statusImage = this.errorImage,
				this.imgWidth = this.errorImageWidth,
				this.imgHeight = this.errorImageHeight
			},
			showContent() {
				console.log("showContent===>")
				this.status = "CONTENT"
			},
			onClickListener: function(res) {
				if (this.status == 'LOADING') return;
				this.$emit('OnClickListener', {
					detail: {
						status: this.status
					}
				}, {});
			}
		}
	};
</script>
<style>
	.status-layout-root {
		width: 100%;
		height: 100%;
		font-family: PingFangSC-Light;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.status-main {
		text-align: center;
		font-size: 14px;
		color: #bfbfbf;
		letter-spacing: -0.01px;
		align-self: center;
		font-weight: bold;
	}

	.status-main image {
		margin-bottom: 10px;
	}

	.status-image {
		width: 137px;
		height: 142px;
	}

	.status-image-anim {
		animation: weuiLoading 0.6s steps(12, end) infinite;
	}

	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}

		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
</style>
